<script setup lang='ts'>
import WorkTable from './components/workTable.vue';
import { ref, computed } from 'vue';
import AddDialog from './components/addDialog.vue';
import { filterWorkDataByStatus } from '../../utils/filterWork';
import { reqGetAllUserStory } from '../../apis/story';
import { onMounted } from 'vue';
import type { StoryItem } from '../../apis/story/type';

const activeTab = ref<string>('1')
const dialogVisible = ref<boolean>(false)
const allRequirement = ref<StoryItem[]>([])
const allBug = ref<StoryItem[]>([])

const staryWork = computed(() => {
  return filterWorkDataByStatus(allRequirement.value, getStatusByTab(activeTab.value))
})

const bugWork = computed(() => {
  return filterWorkDataByStatus(allBug.value, getStatusByTab(activeTab.value))
})

const getAllRequirement = async () => {
  const res = await reqGetAllUserStory('requirement')
  if (res.code === 200) {
    allRequirement.value = res.data
  }
}
const getAllBug = async () => {
  const res = await reqGetAllUserStory('bug')
  if (res.code === 200) {
    allBug.value = res.data
  }
}

const getStatusByTab = (tab: string) => {
  const map: Record<string, string | string[]> = {
    '1': 'in-progress',
    '2': ['completed', 'rejected'],
    '3': 'new'
  }
  return map[tab]
}

onMounted(() => {
  getAllRequirement()
  getAllBug()
})
</script>


<template>
  <el-card>
    <el-menu :default-active="activeTab" class="el-menu-demo" mode="horizontal" @select="activeTab = $event">
      <div class="title-container">
        <el-button class="add-button" icon="Plus" @click="dialogVisible = true">
          添加待办事项
        </el-button>
      </div>
      <el-menu-item index="1">待办</el-menu-item>
      <el-menu-item index="2">已办</el-menu-item>
      <el-menu-item index="3">已创建</el-menu-item>
    </el-menu>
  </el-card>
  <el-card style="margin: 10px 0;">
    <el-collapse>
      <el-collapse-item name="1">
        <template #title>
          <el-icon class="header-icon" style="margin-right: 5px;">
            <Opportunity />
          </el-icon>
          <span style="font-weight: 500;font-size: 16px;">需求</span>
        </template>
        <WorkTable :workData="staryWork" :height="'50vh'" @refresh="getAllRequirement()"></WorkTable>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <el-icon class="header-icon" style="margin-right: 5px;">
            <Warning />
          </el-icon>
          <span style="font-weight: 500;font-size: 16px;">缺陷</span>
        </template>
        <WorkTable :workData="bugWork" :height="'50vh'" @refresh="getAllBug()"></WorkTable>
      </el-collapse-item>
    </el-collapse>
  </el-card>

  <AddDialog v-model:dialogVisible="dialogVisible" @refresh="() => {
    getAllRequirement()
    getAllBug()
  }"></AddDialog>
</template>


<style scoped lang='scss'>
.title-container {
  display: flex;
  align-items: center;
  margin-right: 30px;
  height: 60px;


  .add-button {
    margin-top: 2px;
  }

}
</style>